<template>
	<div class="region-picker">
		<el-button type="text" @click="open = true">{{text}}</el-button>
		<el-dialog title="选择区域"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :visible.sync="open" custom-class="form-dialog form-dialog-medium" append-to-body>

					<div class="region-selector">
						<div class="region-group" v-for="(group, gidx) in regionData" :key="gidx">
							<el-button class="checkbox group-checkbox" @click="checkGroup(group)" :icon="'el-icon-' + group.check">{{group.name}}</el-button>
							<div class="province-checkbox-group">
												<div class="region-province" v-for="(province, pidx) in group.children" :key="pidx">
													<el-button class="checkbox province-checkbox" :icon="'el-icon-' + province.check" @click="checkProvince(province, group)">{{province.name}}</el-button>
													<div class="dropdown-box">
														<el-button class="dropdown-icon" :icon="province.open? 'el-icon-caret-top':'el-icon-caret-bottom'" @click="toggleCityPanel(province)"></el-button>
														<div class="city-checkbox-group dropdown-panel" v-if="province.open">
															<div class="region-city" v-for="(city, cidx) in province.children" :key="cidx">
																<el-button class="checkbox city-checkbox" :icon="'el-icon-' + city.check" @click="checkCity(city, province, group)">{{city.name}}</el-button>

															</div>
														</div>
													</div>
												</div>
							</div>
						</div>

					</div>

				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="save">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>



		</el-dialog>
	</div>


</template>

<script>

import regionData from "@/assets/data/region"
const CHECK_STATUS = {
	CHECK: 'check', // 选中
	MINUS: 'minus', // 部分选中
	NONE: 'none' // 未选中
}

let pickerData = JSON.parse(JSON.stringify(regionData));
pickerData.forEach(province => {
	province.check = CHECK_STATUS.NONE;
	province.count = 0;
	if(province.children){
		province.open = false;
		province.children.forEach(city => {
			city.check = CHECK_STATUS.NONE;
			delete city.children;
		})
	}

});

let regionGroupData = [
	{name: '华东', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['上海', '江苏省', '浙江省', '安徽省', '江西省'].includes(item.name))},
	{name: '华北', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['北京', '天津', '山西省', '山东省', '河北省', '内蒙古自治区'].includes(item.name))},
	{name: '华中', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['湖南省', '湖北省', '河南省'].includes(item.name))},
	{name: '华南', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['广东省', '广西壮族自治区', '福建省', '海南省'].includes(item.name))},
	{name: '东北', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['辽宁省', '吉林省', '黑龙江省'].includes(item.name))},
	{name: '西北', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['陕西省', '新疆维吾尔自治区', '甘肃省', '宁夏回族自治区', '青海省'].includes(item.name))},
	{name: '西南', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['重庆', '云南省', '贵州省', '西藏自治区', '四川省'].includes(item.name))},
	{name: '港澳台', check: CHECK_STATUS.NONE, children: pickerData.filter(item => ['香港特别行政区', '澳门特别行政区', '台湾'].includes(item.name))}
]


export default {
	name: "RegionPicker",
	props: {
		value: {
			type: Object,
			default: {
				provinces:[],
				cities: []
			}
		},
		text:{
			 type:String
		}
	},
	data() {
		return {
			// 是否显示弹出层
			open: false,
			regionData: JSON.parse(JSON.stringify(regionGroupData))
		};
	},
	created(){

	},

	watch:{
		value(val){
		},
		open(newVal){
			if(!newVal){
				this.$emit('update:item', null);
			}
		},
	},
	methods:{
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		reset(){
			 this.regionData = JSON.parse(JSON.stringify(regionGroupData))
		},
		/**
			* 选择分组
		 */
		checkGroup(group){
				this.toggleCheck(group);

		},
		/**
			* 选择省份
			* @param province
			* @param group
			*/
		checkProvince(province, group){
			this.toggleCheck(province);
			this.refreshGroup(group)
		},
		/**
			* 选择城市
			* @param city
			* @param province
			* @param group
			*/
		checkCity(city, province, group){
			this.toggleCheck(city);
			this.refreshProvince(province, group)

		},
		/**
			* 切换选中状态
			* @param item
			*/
		toggleCheck(item){
			if(item.check != CHECK_STATUS.CHECK){
				this.recursionCheck(item, CHECK_STATUS.CHECK)
			}
			else{
				this.recursionCheck(item, CHECK_STATUS.NONE)
			}
		},
		toggleCityPanel(province){
			province.open = !province.open;
			if(province.open){
				this.regionData.forEach(group => {
					group.children.forEach(item => {
									if(item.open && item.id  != province.id){
										item.open = false;
									}
					});
				})
			}

		},
		/**
			* 刷新省份节点信息
			* @param province
			* @param group
			*/
		refreshProvince(province, group){
				let total = province.children.length;
				let checkNum = province.children.filter(item => item.check == CHECK_STATUS.CHECK).length;
				let check = CHECK_STATUS.NONE;
				if(checkNum == total){
					check = CHECK_STATUS.CHECK;
				}
				else if(checkNum > 0){
					check = CHECK_STATUS.MINUS;
				}
				province.count = checkNum;
				if(province.check != check){
					province.check = check;
					this.refreshGroup(group);
				}
		},
		/**
			* 刷新分组节点信息
			* @param group
			*/
		refreshGroup(group){

			let total = group.children.length;
			let noneNum = group.children.filter(item => item.check == CHECK_STATUS.NONE).length;
			let checkNum = group.children.filter(item => item.check == CHECK_STATUS.CHECK).length;
			let check = CHECK_STATUS.NONE;
			if(checkNum == total){
				check = CHECK_STATUS.CHECK;
			}
			else if(noneNum < total){
				check = CHECK_STATUS.MINUS;
			}
			if(group.check != check){
				group.check = check;
			}
		},
		/**
			* 递归选择
			* @param items
			* @param check
			*/
		recursionCheck(item, check){
			item.check = check;
			if(item.children){
				item.children.forEach(child => {
					this.recursionCheck(child, check);
				})

			}
		},
		save(){
			let provinces = [];
			let cities = [];
			this.regionData.forEach(group => {
				if(group.check == CHECK_STATUS.NONE){
					return ;
				}
				group.children.forEach(province => {
						if(province.check == CHECK_STATUS.CHECK){
								provinces.push({
									id: province.id,
									name: province.name
								});
						}
						else if(province.children && province.check == CHECK_STATUS.MINUS){
							province.children.forEach(city => {
								if(city.check == CHECK_STATUS.CHECK){
									cities.push({
										id: city.id,
										name: city.name
									});
								}
							});
						}
				});
			})

			this.$emit('input', {
				provinces, cities
			})
			this.open = false;
			this.reset();
		}



	}
};
</script>
<style scoped lang="scss">

::v-deep .checkbox{
	background: none!important;
	border: none;
	display: flex;
	i{
		border: 1px solid #909090;
		border-radius: 2px;
		width: 16px;
		height: 16px;
		overflow: hidden;
	 &.el-icon-check{
		 background:  $--color-primary;
		 color: #FFFFFF;
		 font-weight: bold;
		 border-color:  $--color-primary;
	 }
		&:hover{
			border-color: $--color-primary;
		}
	}
}

.region-selector{
	.region-group{
		display: flex;
		margin-bottom: 20px;
		.group-checkbox{
			width: 100px;
		}
		.province-checkbox-group{
			display: flex;
			width: 500px;
			flex-wrap: wrap;

			.region-province{
				display: flex;
				margin-right: 10px;
				position: relative;
				.province-checkbox{
						padding-right: 10px;
				}
				.dropdown-box{

						.dropdown-icon{
							border: none;
							padding-left: 5px;
							padding-right: 5px;
							background: none!important;

						}
					.dropdown-panel{
						position: absolute;
						top:100%;
						left: 0;
						border-radius: 5px;
						padding: 10px 0;
						background: #FEFEFE;
						z-index: 10;
						box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

					}

					.city-checkbox-group{
						display: flex;
						width: 300px;
						flex-wrap: wrap;
						.region-city{
							width: 150px;
							overflow: hidden;
							white-space:nowrap;
							text-overflow:ellipsis;
							.city-checkbox{
								padding-right: 0px!important;
							}
						}
					}
				}
			}

		}
	}


}
</style>
